<!--#
layout("/layouts/platform.html"){
#-->

<style>
    .left_aside {
        width: 132px;
        height: 500px;
    }

    .left_tree {
        margin-top: 10px;
        margin-left: -5px;
    }

    /*当前分类标识颜色*/
    /*.left_tree .is-current .el-tree-node__content{*/
    /*    background-color: #F5F7FA;*/
    /*}*/

    .el-tree-node {
        padding-top: 7px;
    }

    .note {
        width: 100%;
        height: 320px;
    }
</style>

<div id="app" v-cloak>
    <el-row class="header navbar bg-white shadow">
        <div class="btn-group tool-button mt5">
            <el-input placeholder="用户名或标题" v-model="pageForm.searchKeyword" @keyup.enter.native="select">
                <el-button slot="append" icon="el-icon-search" @click="select"></el-button>
            </el-input>
        </div>
    </el-row>
    <el-row style="padding-top: 50px;">
        <section class="el-container">
            <aside class="el-aside left_aside">
                <!--  左侧分类数据 -->
                <el-tree
                        @node-click="categoryClick"
                        class="left_tree"
                        :data="categoryData"
                        node-key="id"
                        :props="defaultProps"
                >
                </el-tree>
            </aside>
            <main class="el-main">
                <!-- 列表  -->
                <el-row style="margin-top: 5px;">
                    <el-table
                            :data="tableData"
                            size="small"
                            header-align="center"
                            style="width: 100%"
                    >
                        <!-- 字段 -->
                        <el-table-column
                                prop="coverPic"
                                label="封面图"
                                header-align="center"
                                :show-overflow-tooltip="true"
                                align="center">
                            <template scope="scope">
                                <p v-if="scope.row.coverPic">
                                    <a title="进入直播间" target="_blank" :href="'http://47.114.170.23/detailsPages.html?id='+scope.row.id"><img :src="scope.row.coverPic" style="width: 60px;height: 60px"></a>
                                </p>
                                <p v-else>
                                    <a title="进入直播间" target="_blank" :href="'http://47.114.170.23/detailsPages.html?id='+scope.row.id">暂无数据</a>
                                </p>
                            </template>
                        </el-table-column>

                        <el-table-column label="联赛名称"
                                         header-align="center"
                                         prop="league"
                                         align="center"
                                         :show-overflow-tooltip="true">
                        </el-table-column>

                        <el-table-column label="用户昵称"
                                         header-align="center"
                                         prop="nickName"
                                         align="center"
                                         :show-overflow-tooltip="true">
                        </el-table-column>

                        <el-table-column label="房间人数"
                                         header-align="center"
                                         prop="userCount"
                                         align="center"
                                         :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="房间号"
                                         header-align="center"
                                         prop="liveCode"
                                         align="center"
                                         :show-overflow-tooltip="true">
                        </el-table-column>

                        <el-table-column label="类别"
                                         header-align="center"
                                         prop="category"
                                         align="center"
                                         :show-overflow-tooltip="true">
                            <template scope="scope">
                                <span>{{scope.row.category}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="直播间状态"
                                         header-align="center"
                                         align="center"
                                         v-model="formData.state">
                            <template slot-scope="scope">
                                <i v-if="scope.row.state" class="fa fa-circle text-danger ml5"></i>
                                <i v-if="!scope.row.state" class="fa fa-circle text-success ml5"></i>
                            </template>
                        </el-table-column>

                        <!--操作按钮-->
                        <el-table-column
                                prop="userId"
                                label="操作"
                                header-align="center"
                                align="center"
                                width="120">
                            <template slot-scope="scope">
                                <el-dropdown @command="dropdownCommand">
                                    <el-button size="mini">
                                        <i class="ti-settings"></i>
                                        <span class="ti-angle-down"></span>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="{type:'close',userId:scope.row.userId,row:scope.row}">
                                            下线
                                        </el-dropdown-item>
                                        <el-dropdown-item :command="{type:'edit',userId:scope.row.userId,row:scope.row}">
                                            修改
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <el-row class="el-pagination-container">
                    <el-pagination
                            @size-change="pageSizeChange"
                            @current-change="pageNumberChange"
                            :current-page="pageForm.pageNumber"
                            :page-sizes="[10, 20, 30, 50]"
                            :page-size="pageForm.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageForm.totalCount">
                    </el-pagination>
                </el-row>
            </main>
        </section>
    </el-row>
    <el-dialog
            title="编辑"
            :visible.sync="editDialogVisible"
            :close-on-click-modal="false"
            width="40%">
        <el-form :model="formData" ref="editForm" size="small" label-width="80px">
            <el-form-item prop="name" label="标签">
                <el-input maxlength="100" placeholder="多个标签请以英文逗号分隔"
                          v-model="formData.labels"
                          auto-complete="off" tabindex="2" type="text"></el-input>
            </el-form-item>
            <!--新增/修改群主input-->
            <el-form-item prop="matchId" label="赛事">
                <el-select
                        v-model="formData.matchId"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入赛事名"
                        :remote-method="getMatchList"
                        :loading="loading">
                    <el-option
                            v-for="item in matchData"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="doEdit">确 定</el-button>
        </span>
    </el-dialog>

</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: function () {
            return {
                editDialogVisible:false,
                defaultProps: {
                    children: 'childs',
                    label: 'name'
                },
                pageForm: {
                    code: "",
                    searchKeyword: "",
                    pageNumber: 1,
                    pageSize: 10,
                    totalCount: 0
                },
                matchData: [],
                categoryData:[],
                tableData: [],
                formData: {
                    userId: "",
                    league: "",
                    streamUrl: "",
                    coverPic: "",
                    nickName: "",
                    headPicture: "",
                    streamId: "",
                    code: "",
                    category: "",
                    userCount: "",
                    videoId: "",
                    matchId: "",
                    state: true
                },
                loading: false
            }
        },
        mounted: function (){
        },
        methods: {
            doEdit: function () { // 提交新增/修改
                var self = this;
                self.$refs["editForm"].validate(function (valid) {
                    if (valid) {
                        //titlePopu=0是新增,1是修改
                        $.post(base + "/platform/user/live/editDo",self.formData, function (data) {
                            if (data.code === 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                self.doSearch();
                                self.editDialogVisible = false;
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            categoryLoad: function () {
                var self = this;
                // 分类数据请求接口
                $.post(base + "/platform/match/match/categoryList", function (data) {
                    if (data.code === 0) {
                        data.data.unshift({
                            "name":"全部",
                            "code":"",
                            })
                        self.categoryData = data.data;
                    }
                }, "json");
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/user/live/data/", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code === 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageData();
            },
            select: function () { // 搜索框事件
                this.pageForm.code = "";// 分类数据清空
                this.doSearch();
            },
            categoryClick: function (data, node, obj) { // 点击左侧分类事件
                this.pageForm.searchKeyword = ""; // 清空搜索框数据
                this.pageForm.code = data.code;
                this.pageNumberChange(1);
                this.pageSizeChange(10);
                this.pageData();
            },
            dropdownCommand: function (command) {//监听下拉框事件
                var self = this;
                if ("close" === command.type) {
                    if(command.row.official){
                        $.post(base + "/platform/user/live/" + command.type + "ByNo/" + command.row.id, {}, function (data) {
                            if (data.code === 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                self.formData = false;
                                self.doSearch();
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }else
                    $.post(base + "/platform/user/live/" + command.type + "/" + command.userId, {}, function (data) {
                        if (data.code === 0) {
                            self.$message({
                                message: data.msg,
                                type: 'success'
                            });
                            self.formData = false;
                        } else {
                            self.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    }, "json");
                }else if ("edit" === command.type) {
                    $.post(base + "/platform/user/live/" + command.type + "/" + command.row.id, {}, function (data) {
                        if (data.code === 0) {
                            if (self.$refs["editForm"]) {// 清空校验提示
                                self.$refs["editForm"].resetFields();
                            }
                            self.matchData = [{id: command.row.matchId, label: command.row.league}];
                            self.formData = data.data;// 加载后台表单数据
                            self.editDialogVisible = true;// 打开编辑窗口
                            self.titlePopu = 1;
                        } else {
                            self.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    }, "json");
                }
            },
            getMatchList: function (key) {
                let self = this;
                $.post(base + "/platform/crown/match/data", {searchKeyword: key}, function (data) {
                    self.matchData = data.code === 0 ? data.data.list.map(ite => {
                            ite.label = ite.league + " -- " + ite.mbTeam + " VS " + ite.tgTeam;
                            return ite
                        }
                    ) : [];
                }, "json");
            }
        },
        created: function () {
            this.categoryLoad();
            this.pageData();
        }
    });
</script>
<!--#
}
#-->